<template>
	<div class="wrap">
	<xcl-header :show="loading.show" :call-back="callBack" :is-follow="isFollow" :collect="collect" :page-title="pageTitle" :header-right="headerRight"></xcl-header>
	<div class="content">
		<div class="card" style="margin-top:0">
		    <div class="card-header">
          		<div class="col-80">{{productInfo.n}}</div>
          		<div class="col-20 product-status" :class="{'product-status-bg1':productInfo.s==4,'product-status-bg2':productInfo.s==6,'product-status-bg3':productInfo.s!=4&&productInfo.s!=6}">{{productInfo.s | getProductStatus}}</div>
          	</div>
		    <div class="card-content">
            <div class="card-content-inner">
                  <div class="row text-center" >
                    <div class="col-33">
                        <div>最新净值</div>
                        <div>{{productRunning.cn}}</div>
                    </div>
                    <div class="col-33">
                        <div>购买起点</div>
                        <div>{{productRunning.mbm}}元</div>
                    </div>
                    <div class="col-33">
                        <div>今年以来</div>
                        <div>{{productIncomeHistory.y}}</div>
                    </div>
                  </div>
            </div>
          </div>
          <div class="" style="padding-bottom:1rem;margin:0 0.5rem">
          	<div class="button button-fill btn-style" v-link="{name:'Appointment',params:{id:productInfo.sid}}">预约咨询</div>
          </div>          
		</div>
		<div class="card">
		    <div class="card-content">
		      <div class="card-content-inner">“稳健的投资风格，可观的投资回报，不可错过的投资理财产品！”</div>
		    </div>
		</div>
		<div class="card" style="position:relative;padding-bottom:0.5rem">
			<div class="check-history" v-link="{name:'HistoryView',params:{sid:productInfo.sid}}">查看历史净值</div>
		    <div class="card-content">
		      <div class="card-content-inner" id="myEcharts" style="padding-bottom:0;height:13.5rem"></div>		      
		    </div>
		    <xcl-tab :tab-titles="tabTitles" :click-fn="tabClickFn" style="margin-top:0"></xcl-tab>
		</div>
		<div class="list-block" style="margin:0.5rem 0;">
		    <ul>
		      <li class="item-content item-link" v-link="{name:'ProductElement',params:{SId: productInfo.sid,tid:productInfo.tid,mid:productInfo.cmid}}">
		        <div class="item-media"><i class="icon icon-f7"></i></div>
		        <div class="item-inner" style="margin-left:0">
		          <div class="item-title">产品要素</div>
		        </div>
		      </li>
		      <li class="item-content item-link" v-link="{name:'BuyKnow',params:{sid:productInfo.sid}}">
		        <div class="item-media"><i class="icon icon-f7"></i></div>
		        <div class="item-inner" style="margin-left:0">
		          <div class="item-title">购买须知</div>
		        </div>
		      </li>
		      <li class="item-content item-link" v-link="{name:'ProductTips',params:{sid:productInfo.sid}}">
		        <div class="item-media"><i class="icon icon-f7"></i></div>
		        <div class="item-inner" style="margin-left:0">
		          <div class="item-title">产品说明</div>
		        </div>
		      </li>
		      <li class="item-content item-link" v-link="{name:'Bulletin',params:{Id: productInfo.id}}">
		        <div class="item-media"><i class="icon icon-f7"></i></div>
		        <div class="item-inner" style="margin-left:0">
		          <div class="item-title">产品公告</div>
		        </div>
		      </li>
		    </ul>
		</div>
		<div class="list-block" style="margin:0.5rem 0;">
		    <ul>
		      <li class="item-content item-link" v-link="{name:'Team',params:{sid:productInfo.sid,Id:productInfo.tid,mid:productInfo.cmid}}">
		        <div class="item-media"><i class="icon icon-f7"></i></div>
		        <div class="item-inner" style="margin-left:0">
		          <div class="item-title">策略团队</div>
		          <!--<div class="item-after">金络脑</div>-->
		        </div>
		      </li>
		      <li class="item-content item-link" v-link="{name:'Manager',params:{sid:productInfo.sid,Id:productInfo.tid,mid:productInfo.cmid}}">
		        <div class="item-media"><i class="icon icon-f7"></i></div>
		        <div class="item-inner" style="margin-left:0">
		          <div class="item-title">投资经理</div>
		          <!--<div class="item-after">张三</div>-->
		        </div>
		      </li>
		    </ul>
	  	</div>
	</div>
	<xcl-loading :show="loading.show" :show-txt="loading.showTxt"></xcl-loading>
	</div>
</template>
<script type="text/javascript">
	import xclHeader from '../components/header.vue'
	import xclTab from '../components/tab.vue'
	import xclLoading from '../components/loading.vue'
	let ProductProxy =  require("../proxy/product_proxy");
	let MyFollowProxy = require("../proxy/my_follow_proxy");
  	let product = new ProductProxy();
  	let MyFollow = new MyFollowProxy();
  	let echarts = require('echarts');
  	let myCharts = require('../m.js');
	export default{
		data(){
			return{
				pageTitle:'产品详情',
				collect:true,
				isFollow:false,
				headerRight:'',
				dateRange:new Date().getTime()-360*24*3600*1000,
				productSId: this.$route.params.SId,
				productInfo:{},
				productRunning:{},
				productIncomeHistory:{},
				productNetHistory:[{hts:"2016-06-07",tn:0}],
				loading:{
                    show:false,
                    showTxt:'数据加载中...'
                },
                callBack:()=>{
                	this.productFollow();
                },
               	tabTitles:[
                    {title:'月',order:new Date().getTime()-30*24*3600*1000,active:false},
                    {title:'季',order:new Date().getTime()-90*24*3600*1000,active:false},
                    {title:'半年',order:new Date().getTime()-180*24*3600*1000,active:false},
                    {title:'年',order:new Date().getTime()-360*24*3600*1000,active:true},
                ]
			}
		},
		ready(){
			this.getProductDetail();
			this.getProductHistory();
		},
		methods:{
			//获取产品信息
			getProductDetail (){
                var _this=this;
                _this.loading.show=true;
                product.getProduct(_this.productSId,function(data){
                    if(data.code === 200 && data.results && data.results.length){
						_this.productInfo=data.results[0];
						if(localStorage.token){
		           			MyFollow.isFollow(localStorage.token,data.results[0].id,2,function(data){
		           				if(data.code==200 && data.results[0]==true){
		           					_this.collect=false;
		           					_this.isFollow=true;
		           				}
		           			});
		           		}
                    }
                    _this.loading.show=false;
                });
                product.getProductRunningBase(_this.productSId,function(data){
            		if(data.code === 200 && data.results && data.results.length){
            			_this.productRunning=data.results[0];
            		}
            		 _this.loading.show=false;
            	});
            	product.getProductIncomeHistory(_this.productSId,function(data){
            		if(data.code === 200 && data.results && data.results.length){
            			_this.productIncomeHistory=data.results[0];
            		}
            		 _this.loading.show=false;
            	});           	
           },
           //产品收藏
           productFollow(){
           		var _this=this;
           		var token=localStorage.token;
            	if(!token){
            		_this.$router.go('/Login'); 
            	}else{
            		MyFollow.addMyFollow(token,_this.productInfo.id,2,'',function(data){
            			if(data.code==200){
            				_this.collect=false;
            				_this.isFollow=true;
            			}else if(data.code == 4090){
            				_this.$router.go('/Login');
            			}
            		});
            	}
           		
           },
           //获取echars数据
           getProductHistory(){
           		var _this=this;
           		product.getProductNetHistory(_this.productSId,_this.dateRange,new Date().getTime(),function(data){
            		if(data.code === 200 && data.results && data.results.length){
            			_this.productNetHistory=data.results;            			
            		}
            		_this.getMyCharts();
            	});
           },
           getMyCharts(){
           		var _this=this;
	           	var _MProductPage = new myCharts();
	           	var _date=new Array();
	           	var _data=new Array();
	           	for(var i=0;i<_this.productNetHistory.length;i++){
	           		_date.push(_this.productNetHistory[i].hts.substr(5,5));
	           		_data.push(_this.productNetHistory[i].tn);
	           	}
				_MProductPage.initChart({
					date:_date,
					data:_data,
					range:_data[_data.length-1]-_data[0],
				});
           },
           tabClickFn(order){
           		var _this=this;
                this.tabTitles.forEach((item,index)=>{
                    order===item.order ? item.active = true : item.active = false;
                    if(order===item.order){
                    	_this.dateRange=order;
                    	_this.getProductHistory();
                    }
                });
            }
		},
		components:{
			'xclHeader':xclHeader,
			"xclLoading":xclLoading,
			'xclTab':xclTab
		}
	}
</script>
<style lang="stylus">
.btn-style{
	width 95%
	height 2rem
	margin:0 auto
	font-size .85rem
	line-height 2rem !important;
}
.check-history{
	position:absolute;
	z-index:99;
	top:1.3rem;
	right:1rem;
	font-size: .75rem;
	color:#a48439
}
</style>